<template>
  <div>
     <div class="box" :class="csAry" @click="m1" @dblclick="m2" @mouseout="m3">🐌</div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      csAry:[]
    }
  },
  methods:{
    m1(){
     this.csAry.push('c1')
    },
    m2(){
      this.csAry.push('c2')
    },
    m3(){
      this.csAry.push('c3')
    }
  }
}
</script>

<style>
  .box{
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    border-radius: 50%;
    transition: 3s;
    text-align: center;
    line-height: 100px;
  }
  .c1{
    background: linear-gradient(red,tomato,orange,yellow);
  }
  .c2{
    box-shadow: 10px 10px 10px gray;
  }
  .c3{
    transform: rotate(360deg);
  }
</style>